<template>
  <div class="user-home">
    <div class="welcome-card">
      <h2>欢迎，{{ userName }}！</h2>
      <p>欢迎使用应急任务待办系统，祝您工作顺利！</p>
    </div>
    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-num">{{ stats.todo }}</div>
        <div class="stat-label">待处理</div>
      </div>
      <div class="stat-card">
        <div class="stat-num">{{ stats.doing }}</div>
        <div class="stat-label">进行中</div>
      </div>
      <div class="stat-card">
        <div class="stat-num">{{ stats.done }}</div>
        <div class="stat-label">已完成</div>
      </div>
      <div class="stat-card">
        <div class="stat-num">{{ stats.overdue }}</div>
        <div class="stat-label">逾期</div>
      </div>
      <div class="stat-card">
        <div class="stat-num">{{ stats.total }}</div>
        <div class="stat-label">总任务数</div>
      </div>
    </div>
    <div class="quick-row">
      <el-button @click="goToTask">处理任务</el-button>
      <el-button @click="goToHistory">任务日志</el-button>
    </div>
    <div class="main-row">
      <div class="main-card">
        <h3>最近任务</h3>
        <el-table :data="recentTasks" size="small" border style="width: 100%">
          <el-table-column prop="title" label="任务标题" />
          <el-table-column prop="status" label="状态" :formatter="formatStatus" />
          <el-table-column prop="deadline" label="截止时间" />
        </el-table>
      </div>
      <div class="main-card">
        <h3>系统公告</h3>
        <ul class="notice-list">
          <li v-for="(notice, idx) in notices" :key="idx">{{ notice }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { listMyTask } from '@/api/emergency/task'
import request from '@/utils/request'
export default {
  name: 'UserHome',
  data() {
    return {
      userName: this.$store.state.user.name || '用户',
      stats: { todo: 0, doing: 0, done: 0, overdue: 0, total: 0 },
      recentTasks: [],
      notices: [
        '2025-07-10 系统升级通知：请及时处理待办任务。',
        '2025-07-08 新功能上线，欢迎体验。'
      ]
    }
  },
  created() {
    this.loadStatsAndTasks();
    this.loadMyStats();
  },
  methods: {
    loadStatsAndTasks() {
      // 查询当前用户的任务列表，统计状态
      listMyTask({ pageNum: 1, pageSize: 10 }).then(res => {
        const rows = res.rows || [];
        this.stats.todo = rows.filter(t => t.status === 0).length;
        this.stats.doing = rows.filter(t => t.status === 1).length;
        this.stats.done = rows.filter(t => t.status === 2).length;
        this.recentTasks = rows.slice(0, 5);
      });
    },
    loadMyStats() {
      request({
        url: '/emergency/task/myStats',
        method: 'get'
      }).then(res => {
        if (res.code === 200 && res.data) {
          this.stats = res.data;
        }
      });
    },
    formatStatus(row) {
      const map = { 0: '待处理', 1: '进行中', 2: '已完成', 3: '逾期' };
      return map[row.status] || '未知';
    },
    goToTask() {
      this.$router.push('/emergency/task/my-task');
    },
    goToHistory() {
      this.$router.push('/emergency/log/index');
    },
    goToProfile() {
      this.$router.push('/system/user/profile/index');
    }
  }
}
</script>

<style scoped>
.user-home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px;
}
.welcome-card {
  background: #f0f9ff;
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(33,147,176,0.06);
}
.stats-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(33,147,176,0.08);
  padding: 20px 0;
  text-align: center;
}
.stat-num {
  font-size: 2.2rem;
  color: #2193b0;
  font-weight: bold;
}
.stat-label {
  color: #888;
  margin-top: 8px;
}
.quick-row {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
}
.main-row {
  display: flex;
  gap: 24px;
}
.main-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(33,147,176,0.08);
  padding: 20px 24px 24px 24px;
}
.notice-list {
  padding-left: 18px;
  color: #666;
  font-size: 15px;
}
</style> 